<template>
	<div class="max">
		<my-header :backBtn="true"></my-header>
		<div class="cont-nof">
			<div class="welcome-txt">
				欢迎来到微幼云
			</div>
			<div class="select_block tl">
				<div class="tips">
					请选择学校地区及输入学校名称：
				</div>
				<div class="add_search_item tl">
					<div class="search_name fl">省份</div>
					<div class="search_input fr">
						<select v-model="query.provinceId" @change="fetchCity">
							<option :value="item.id" v-for="item in areaList">{{item.name}}</option>
						</select>
					</div>
				</div>
				<div class="add_search_item tl">
					<div class="search_name fl">学校名称</div>
					<div class="search_input fr">
						<input type="text" v-model="query.name" @input="fetchKindergarten" placeholder="请输入学校名称">
					</div>
				</div>
				<div class="add_search_item tl">
					<div class="search_name fl">城市</div>
					<div class="search_input fr">
						<select v-model="query.cityId" @change="fetchCountry">
							<option :value="item.id" v-for="item in cityList">{{item.name}}</option>
						</select>
					</div>
				</div>
				<div class="add_search_item tl">
					<div class="search_name fl">区</div>
					<div class="search_input fr">
						<select v-model="query.countryId" @change="fetchKindergarten">
							<option :value="item.id" v-for="item in countryList">{{item.name}}</option>
						</select>
					</div>
				</div>
			</div>
			<div class="select_block kindergartenList oa">
				<div class="kindergarten-item" v-for="item in kindergartenList" @click="loginInKindergarten(item)">
					<div class="login_avater fl">
						<img :src="item.logo" alt="">
					</div>
					<div class="login_name fl">{{item.name}}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				query: {
					provinceId: '',
					cityId: '',
					countryId: '',
					name: '',
				},
				areaList: [],
				cityList: [],
				countryList: [],
				kindergartenList: [],
			};
		},
		methods: {
			fetchArea() {
				this.$http.fetchArea(0).then(resp => {
					this.areaList = resp.data;
				})
			},
			fetchCity() {
				this.$http.fetchArea(this.query.provinceId).then(resp => {
					this.cityList = resp.data;
					this.fetchKindergarten();
				})
			},
			fetchCountry() {
				this.$http.fetchArea(this.query.cityId).then(resp => {
					this.countryList = resp.data;
					this.fetchKindergarten();
				})
			},
			fetchKindergarten() {
				this.$http.fetchKindergartenList(this.query).then(resp => {
					this.kindergartenList = resp.data;
				})
			},
			loginInKindergarten(kindergarten) {
				this.$http.loginInKindergarten({
					id: kindergarten.id
				}).then(resp => {
					this.$Cookies.set("kindergartenId", kindergarten.id);
					this.$Cookies.set("kindergartenName", kindergarten.name);
					this.$Cookies.set("logo", kindergarten.logo);
					this.$router.push("/home");
				})
			},
		},
		created() {},
		mounted() {
			this.fetchArea();
		}
	};
</script>

<style scoped>
	.kindergarten-item {
		height: 9rem;
		width: 100%;
		border-bottom: 1px solid rgba(245, 245, 245, 1);
		box-sizing: border-box;
	}

	.login_avater {
		width: 9rem;
		height: 9rem;
	}

	.login_avater img {
		width: 7rem;
		height: 7rem;
		margin-top: 1rem;
	}

	.login_name {
		height: 100%;
		margin-left: 0.5rem;
		line-height: 9rem;
		font-size: 1.6rem;
	}

	.welcome-txt {
		font-size: 2.6rem;
		margin: 1.8rem 0;
	}

	.select_block {
		display: inline-block;
		width: calc(100% - 2rem);
		margin: 0 auto 1.5rem;
		background: #FFFFFF;
		border-radius: 6px;
		padding: 2rem 1rem 0rem 1rem;
		box-sizing: border-box;
	}

	.kindergartenList {
		overflow: auto;
		padding: 0;
		max-height: 27rem;
	}

	.tips {
		font-size: 1.8rem;
		margin-bottom: 2rem;
	}

	.add_search_item {
		width: 100%;
		margin: 0 auto 1.7rem auto;
		height: 4rem;
		line-height: 4rem;
		font-size: 1.6rem;
		color: rgba(16, 16, 16, 1);
	}

	.search_name {
		width: 8rem;
		height: 100%;
	}

	.search_input {
		width: calc(100% - 8rem);
		height: 100%;
		border: 1px solid rgba(238, 238, 238, 1);
		box-sizing: border-box;
	}

	.search_input select {
		outline: none;
		width: 100%;
		height: 100%;
		font-size: 1.6rem;
		background: none;
		border: 0px;
	}

	.search_input input {
		background: none;
		border: 0px;
		outline: none;
		height: 100%;
		width: 100%;
		font-size: 1.4rem;
		padding: 0 0.5rem;
	}
</style>
